<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>竹里馆后台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>

</head>
<body>
    <!-- 顶部开始 -->
    <div class="container">
        <div class="logo"><a href="./index.jsp">竹里馆</a></div>
        <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
        <ul class="layui-nav right" lay-filter="">
          <li class="layui-nav-item">
            <a href="#">${sessionScope.adminMap.adminId}</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
              <dd><a href="${pageContext.request.contextPath}/AdminServlet?op=logout">退出</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/back/index.jsp">首页</a></li>
        </ul>
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
          <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="./index.jsp">
                        <i class="iconfont">&#xe761;</i>
                      	  首页
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>              
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                       	 房源信息
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="${pageContext.request.contextPath}/back/HomestayMessageAdmin.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                               	 民宿管理
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                       	 订单详情
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="./orderInfo.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                               	 订单列表
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                       	 销量统计
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li id="regionChart">
                            <a href="${pageContext.request.contextPath}/back/echarts.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                              	 各地区总收入报表
                            </a>
                        </li>
                        <li id="styleChart">
                            <a href="${pageContext.request.contextPath}/back/echarts2.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                                                                                               按风格查询报表                                                               
                            </a>
                        </li>
                    </ul>
                </li>
               
            </ul>
          </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <!-- class="page-content" -->
        <div class="page-content">
          <div >
          <!-- class="content" -->
            <!-- 右侧内容框架，更改从这里结束 -->
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
           	<!--  定义的折线图容器 -->
           	<ul>
           	<!-- style="float:left" -->
           		<li ><div id="firstChart" style="max-width: 100%;height:300px;"></div></li>
           		<li><div id="secondChart" style="max-width: 100%;height:300px;"></div></li>
           		<li><div id="thirdChart" style="max-width: 100%;height:300px;"></div></li>
           	</ul>
            <!-- <div id="firstChart" style="max-width: 50%;height:300px;"></div>
            <div id="secondChart" style="max-width: 50%;height:300px;"></div>
            <div id="thirdChart" style="max-width: 50%;height:300px;"></div> -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
	<div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="./js/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/echarts-for-x-admin.js"></script>

        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myFirstChart = echarts.init(document.getElementById('firstChart'),'echarts-for-x-admin');
        var mySecondChart = echarts.init(document.getElementById('secondChart'),'echarts-for-x-admin');
        var myThirdChart = echarts.init(document.getElementById('thirdChart'),'echarts-for-x-admin');
		
        $(document).ready(function(){
        	// 定义两个数组用于存储json返回来的数据
        	var xAxis = new Array();
        	var yAxis = new Array();
        	var values = [];
        	// 进入页面显示折线图
        	// 发送ajax
        	$.ajax({
				async: true,                                                 // 表示异步请求,默认true
				url: "${pageContext.request.contextPath}/StatisticsServlet", // 规定发送请求的 URL,服务器地址
				type: "GET",                                             // 规定请求方式：get post put delete
				data: {op:"getEveryRegionTotalIncome"},                             // 规定要发送到服务器的数据
				dataType: "json",                                        // 预期的服务器响应的数据类型 text文本  html xml json jsonp script...
				contentType: "application/x-www-form-urlencoded",
				success:function(result,status,xhr){   
					console.log(result);
					//$("#addbox").append("<div id=\"main\" style=\"min-width: 100%;height:400px;\"></div>");
					for(var i = 0; i < result.length; i++){
						xAxis[i] = result[i].homeAddress;
						yAxis[i] = result[i].income;
						values.push({
							name:result[i].homeAddress,
							value:result[i].income
						});
					}
					//alert(xAxis);
					// 指定图表的配置项和数据--折线图
	                var firstOption = {
	                    title: {
	                        text: '折线图'
	                    },
	                    tooltip: {
	                        trigger: 'axis',
	                    },
	                    legend: {
	                        data:['各地区总收入']
	                    },
	                    grid: {
	                        left: '3%',
	                        right: '4%',
	                        bottom: '3%',
	                        containLabel: true
	                    },
	                    toolbox: {
	                        feature: {
	                        	dataView: {show: true, readOnly: false},
	                            restore: {show: true},
	                            saveAsImage: {}
	                        }
	                    },
	                    xAxis: {
	                        type: 'category',
	                        boundaryGap: false,
	                        data: xAxis
	                    },
	                    yAxis: {
	                        type: 'value'
	                    },
	                    series: [
	                        {
	                            name:'各地区总收入',
	                            type:'line',
	                            stack: '总量',
	                            data:yAxis
	                        }
	                        
	                    ]
	                };
					
	             	// 指定图表的配置项和数据--柱状图
	                var secondOption = {
	                    title: {
	                        text: '柱状图'
	                    },
	                    tooltip: {
	                        trigger: 'axis'
	                    },
	                    legend: {
	                        data:['各地区总收入']
	                    },
	                    grid: {
	                        left: '3%',
	                        right: '4%',
	                        bottom: '3%',
	                        containLabel: true
	                    },
	                    toolbox: {
	                        feature: {
	                        	dataView: {show: true, readOnly: false},
	                            restore: {show: true},
	                            saveAsImage: {}
	                        }
	                    },
	                    xAxis: {
	                        type: 'category',
	                        data: xAxis
	                    },
	                    yAxis: {
	                        type: 'value'
	                    },
	                    series: [{
	                        data: yAxis,
	                        type: 'bar',
	                        //showBackground: true,
	                        backgroundStyle: {
	                            color: 'rgba(220, 220, 220, 0.8)'
	                        }
	                    }]
	                };
	             	
	             	// 指定图表的配置项和数据--饼图
					var thirdOption = {
						    tooltip: {
						        trigger: 'item',
						        formatter: '{a} <br/>{b}: {c} ({d}%)'
						    },
						    legend: {
						        orient: 'vertical',
						        left: 10,
						        data: xAxis
						    },
						    toolbox: {
		                        feature: {
		                        	dataView: {show: true, readOnly: false},
		                            restore: {show: true},
		                            saveAsImage: {}
		                        }
		                    },
						    series: [
						        {
						            name: '地址',
						            type: 'pie',
						            radius: ['50%', '70%'],
						            avoidLabelOverlap: false,
						            label: {
						                show: false,
						                position: 'center'
						            },
						            emphasis: {
						                label: {
						                    show: true,
						                    fontSize: '30',
						                    fontWeight: 'bold'
						                }
						            },
						            labelLine: {
						                show: false
						            },
						            data: 
						            	values
								        /* {value: 310, name: '邮件营销'},
								        {value: 234, name: '联盟广告'},
								        {value: 135, name: '视频广告'},
								        {value: 1548, name: '搜索引擎'} */
						        }
						    ]
					};

	                // 使用刚指定的配置项和数据显示图表。
	                myFirstChart.setOption(firstOption);
	                mySecondChart.setOption(secondOption);
	                myThirdChart.setOption(thirdOption);
				},
				error:function(xhr,status,error){   // error(xhr,status,error)	如果请求失败要运行的函数。
					alert("ajax异步请求失败");
				}
        	}); 
        })
    	</script>
    <script>
    //百度统计可去掉
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
</body>
</html>